<template>
	<div>
		<div style="border-bottom: 1px solid #F2F2F2;padding-bottom: 10px;">
			<el-link type="primary" @click="onAddConfigClickHandler">增加数据源</el-link>
		</div>
		<ul>
			<li v-for="(item,index) in datasourceList" :key="index"
				style="padding: 5px;border-bottom:1px dashed #F2F2F2;position: relative;">
				<el-link @click="onEditConfigClickHandler(item)">{{item.name}}</el-link>
				<i class="datasource-close-icon el-icon-close" style="position: absolute;right: 10px;top: 8px;"
					@click="onRemoveConfigClickHandler(item)"></i>
			</li>
		</ul>
		<el-dialog title="数据源配置" v-model="configDialogVisible" width="70%">
			<el-row style="margin-top: 10px;">
				<el-col :span="4"><label style="display: inline-block;min-width: 10px;"></label></el-col>
				<el-col :span="4" style="text-align: right;padding-right: 10px;"><label>数据源ID</label></el-col>
				<el-col :span="8">
					<el-input size="mini" v-model="id"></el-input>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="4"><label style="display: inline-block;min-width: 10px;"></label></el-col>
				<el-col :span="4" style="text-align: right;padding-right: 10px;"><label>名称</label></el-col>
				<el-col :span="8">
					<el-input size="mini" v-model="name"></el-input>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="4"><label style="display: inline-block;min-width: 10px;"></label></el-col>
				<el-col :span="4" style="text-align: right;padding-right: 10px;"><label>表</label></el-col>
				<el-col :span="8">
					<el-select size="mini" v-model="tableName" :filterable="true">
						<el-option v-for="item in tableList" :key="item.value" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="4"><label style="display: inline-block;min-width: 10px;"></label></el-col>
				<el-col :span="4" style="text-align: right;padding-right: 10px;"><label>where条件</label></el-col>
				<el-col :span="8">
					<el-input size="mini" type="textarea" v-model="whereClause"></el-input>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="4"><label style="display: inline-block;min-width: 10px;"></label></el-col>
				<el-col :span="4" style="text-align: right;padding-right: 10px;"><label>排序条件</label></el-col>
				<el-col :span="8">
					<el-input size="mini" v-model="orderBy"></el-input>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="4"><label style="display: inline-block;min-width: 10px;"></label></el-col>
				<el-col :span="4" style="text-align: right;padding-right: 10px;"><label>查询</label></el-col>
				<el-col :span="8">
					<el-input size="mini" type="textarea" v-model="query" rows="6"></el-input>
				</el-col>
			</el-row>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onOkClickHandler">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "DataSourceConfig",
		data() {
			return {
				datasourceList: [],
				configDialogVisible: false,
				id: "",
				name: "",
				tableName: "",
				whereClause: "",
				orderBy: "",
				query: "",
				tableList: [],
				isNew: false,
				editIndex: -1,
			}
		},
		methods: {
			onAddConfigClickHandler() {
				this.isNew = true;
				this.id = "";
				this.name = "";
				this.tableName = "";
				this.whereClause = "";
				this.orderBy = "";
				this.query = "";
				this.configDialogVisible = true;
			},
			onOkClickHandler() {
				this.configDialogVisible = false;
				if (this.isNew) {
					this.datasourceList.push({
						"id": this.id,
						"name": this.name,
						"tableName": this.tableName,
						"whereClause": this.whereClause,
						"orderBy": this.orderBy,
						"query": this.query
					});
				} else {
					this.datasourceList.splice(this.editIndex, 1, {
						"id": this.id,
						"name": this.name,
						"tableName": this.tableName,
						"whereClause": this.whereClause,
						"orderBy": this.orderBy,
						"query": this.query
					});
				}
				this.resetDataSourceArray();
			},
			setTableList(tableList) {
				this.tableList = tableList;
			},
			onEditConfigClickHandler(item) {
				for (var i = 0; i < this.datasourceList.length; i++) {
					if (this.datasourceList[i].id == item.id) {
						this.editIndex = i;
						break;
					}
				}
				this.isNew = false;
				this.id = this.datasourceList[this.editIndex].id;
				this.name = this.datasourceList[this.editIndex].name;
				this.tableName = this.datasourceList[this.editIndex].tableName;
				this.whereClause = this.datasourceList[this.editIndex].whereClause;
				this.orderBy = this.datasourceList[this.editIndex].orderBy;
				this.query = this.datasourceList[this.editIndex].query;
				this.configDialogVisible = true;
			},
			resetDataSourceArray() {
				var tempArray = [];
				if (this.datasourceList != undefined) {
					for (var i = 0; i < this.datasourceList.length; i++) {
						tempArray.push({
							"name": this.datasourceList[i].name,
							"value": this.datasourceList[i].id
						})
					}
				}
				this.$store.state.mformDesigner.setDataSourceArray(tempArray);
			},
			onRemoveConfigClickHandler(item) {
				this.$confirm("确定要移除数据源吗？", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var index = 0;
					for (var i = 0; i < this.datasourceList.length; i++) {
						if (this.datasourceList[i].id == item.id) {
							index = i;
							break;
						}
					}
					this.datasourceList.splice(index, 1);
					this.resetDataSourceArray();
				}).catch(() => {

				});

			}
		},
	}
</script>

<style>
	
</style>
